
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Gong's family -- 致那些年最美好的记忆</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="author" content="Ryan">
  <meta name="Description" content="Personal HTML5 for Gentileman Gong">
  <link rel="shortcut icon" href="images/icons/favicon.ico" type="image/x-icon">
  <link rel="icon" href="images/icons/favicon.ico" type="image/x-icon">
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/contact.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/responsive.css" rel="stylesheet" type="text/css" media="screen" />
 <style type="text/css">
    #QRcodeImg{
     background:url("images/qrcodeimg.png" ) no-repeat 0px 0px;
        width: 150px;
        height: 150px;
        position: absolute;/*可以覆盖在内容之上，因为采用absolute时，脱离文档流  */        
        right:10px;
        bottom: 50px;
        z-index: 1002;
        display: none;
    }
    footer div p a:hover #QRcodeImg{ 
      display:block;
    }
    </style>
<script src="js/modernizr.js" type="text/javascript"></script>
</head>
<body class="centered-tiles only-3columns">


 

<!-- start preloader -->
<div id="preloader">
  <div id="status">
    <div class="parent">
      <div class="child">
        <p>loading</p>
      </div>
    </div>
  </div>
</div>
<!-- end preloader --> 

<!-- start main nav -->
<nav id="main-nav">
  <ul id="options" class="clearfix">
    <li> <a href="index.html#home">首页</a> </li>
    <li> <a href="index.html#portfolio" class="selected">姓氏源起</a></li>
    <li> <a href="index.html#services">家族相册</a> </li>
    <li> <a href="index.html#agency">时光机</a> </li>
    <li> <a href="index.html#blog">Blog</a> </li>
    <li> <a href="#" class="sub-nav-toggle">经典推荐</a>
      <ul class="sub-nav hidden">
        <li> <a href="project01.html">书籍</a> </li>
        <li> <a href="project02.html">电影</a> </li>
        <li> <a href="post01.html">音乐</a> </li>
      </ul>
    </li>
    <li> <a href="index.html#contact">联系我们</a> </li>
  </ul>
  <ul class="social-list clearfix">
    <li> <a href="#"><i class="fa fa-qrcode"></i></a> </li>
    <li> <a href="#"><i class="fa fa-weixin"></i></a> </li>
    <li> <a href="#"><i class="fa fa-qq"></i></a> </li>
  </ul>
</nav>
<!-- end main nav -->

<div id="wrap">
  <div class="content-wrapper">
  	<!-- start header -->
    <header id="header" class="clearfix">
       <ul class="social-list clearfix not-white">
        <li> <a href="#" class="circled"><i class="fa fa-qrcode"></i> </a> </li>
        <li> <a href="#" class="circled"><i class="fa fa-weixin"></i> </a> </li>
        <li> <a href="#" class="circled"><i class="fa fa-qq"></i> </a> </li>
      </ul>
      <div class="logo-wrapper">
        <h1 id="logo"><a href="index.html">Ridgewood</a></h1>
      </div>
      <div id="menu-button">
        <div class="centralizer">
          <div class="cursor">
            <div id="nav-button"> <span class="nav-bar"></span> <span class="nav-bar"></span> <span class="nav-bar"></span> </div>
          </div>
        </div>
      </div>
    </header>
    <!-- end header -->
    
    <!-- start content -->
    <div id="content">
      <div id="container" class="clearfix">
        <article class="element clearfix col3-3 home white auto">
          <div class="boxed">
            <div class="header-section">
              <div class="avatar"><img src="images/about03.jpg" alt="" /></div>
              <h5 class="header"><span class="italic">by</span> John Doe</h5>
              <p class="below-button">June 13, 2016</p>
            </div>
            <h2 class="header">Speaking at Technarte <br />
              <span class="italic">in</span> Bilbao, Spain</h2>
            <p class="large">This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.</p>
            <p>Our collection of modern <a href="#">hipster</a> photographic images. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In the 1980s, Vestibulum id ligula felisat euismod semper. Donec id elit non mi porta gravida at eget metos. Donec sed odio dui. Maecenas faucibus mollis interdum. Duis mollis est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <ul class="unordered-list">
              <li> <strong>Game Design</strong>: services include digital content and in-store digital experience</li>
              <li> <strong>Creative R &amp; D</strong>: combined strategic planning expertise with our creative resources.</li>
              <li> <strong>Photography</strong>: in-house 9,500 sqft photographic studio </li>
            </ul>
            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
            <div class="bottom-section">
              <ul class="tag-list clearfix">
                <li><a href="#" title="">Creative R&amp;D <span>3</span></a></li>
                <li><a href="#" title="">Photography <span>1</span></a></li>
              </ul>
            </div>
          </div>
        </article>
        <article class="element clearfix col3-3 home white auto">
          <div class="boxed">
            <h3 class="header">Comments</h3>
            <div class="break"></div>
            <div class="comment clearfix">
              <div class="commenter-avatar"> <img alt="" src="images/about01.jpg" /> </div>
              <div class="comment-content">
                <p class="time">October 3, 2016</p>
                <h5>Tobias Schmied</h5>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr sed diam nonumy.</p>
              </div>
              <div class="comment-reply-button-column"> <a href="#" class="button">Reply</a> </div>
            </div>
            <div class="comment clearfix">
              <div class="commenter-avatar"> <img alt="" src="images/about02.jpg" /> </div>
              <div class="comment-content">
                <p class="time">October 3, 2016</p>
                <h5>Mark McDougal</h5>
                <p>Justo quam fellis, ultricies pellentesque eu, pretium quis sem.</p>
              </div>
              <div class="comment-reply-button-column"> <a href="#" class="button">Reply</a> </div>
            </div>
            <div class="comment-form-wrapper"> <a href="#" title="">
              <div class="comment-form-icon-wrapper">
                <div class="circle-anim"></div>
              </div>
              </a>
              <form class="comment-form" method="post" action="contact.php" name="contactform" id="contactform" autocomplete="off">
                <input name="name" type="text" id="name" title="Name" />
                <input name="email" type="text" id="email" title="Email" />
                <textarea name="comments" id="comments" title="Your Message"></textarea>
                <div class="input-wrapper clearfix">
                  <input type="submit" class="send-btn" value="Post Comment" id="submit" name="Submit" />
                  <span id="message"></span></div>
              </form>
            </div>
          </div>
        </article>
      </div>
    </div>
    <!-- end content --> 
  </div>
  <!-- end content-wrapper --> 
</div>
<!-- end wrap -->

<footer id="footer" class="clearfix">
  <div class="container" style="padding:10px;"> <p class="text-center" id="now_time"></p></div>

  <div class="padding-wrapper">
    <p class="alignleft">© <span id="now_year">0000</span>, Gong's family All Rights Reserved</p> 
    <p class="alignright">Made with <i class="fa fa-heart"></i> by <a href="#" id="qrcode_link">Ryan<img id="QRcodeImg"></a></p>
  </div>
</footer>
<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="js/jquery-easing-1.3.js" type="text/javascript"></script> 
<script src="js/jquery.touchSwipe.min.js" type="text/javascript"></script> 
<script src="js/jquery.isotope2.min.js" type="text/javascript"></script> 
<script src="js/jquery.ba-bbq.min.js" type="text/javascript"></script> 
<script src="js/packery-mode.pkgd.min.js" type="text/javascript"></script> 
<script src="js/jquery.isotope.load.js" type="text/javascript"></script> 
<script src="js/main.js" type="text/javascript"></script> 
<script src="js/jquery.form.js" type="text/javascript"></script> 
<script src="js/input.fields.js" type="text/javascript"></script> 
<script src="js/preloader.js" type="text/javascript"></script> 
<script src="js/bootstrap.min.js" type="text/javascript"></script> 
<script src="js/jquery.sliphover.min.js"></script> 
<script type="text/javascript">
  $(function(){
    var myDate = new Date;
    var year = myDate.getFullYear(); //获取当前年
    var mon = myDate.getMonth() + 1; //获取当前月
    var date = myDate.getDate(); //获取当前日
    var week = myDate.getDay();
    var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; 
    $("#now_time").text("今天是"+year + "年" + mon + "月" + date + "日" + weeks[week]);
    $("#now_year").text(year);
  });
</script>
</body>
</html>
